<template>
    <view class="forumItem" @click.stop="toDetail(item)">
        <!--    头像信息-->
        <view class="avatar-info flex-row gap-[10rpx]">
            <image :src="getImgUrl(item.avatar)"></image>
            <view class="info flex-column-between">
                <view class="name">{{ item.nickname }}</view>
                <view class="time">{{ item.createTime }}</view>
            </view>
        </view>
        <!--    副标题-->
        <view class="p-[20rpx]">
            <topicList :list="item.topicList"></topicList>
        </view>

        <!--        <view class="sub-box py-[10rpx] flex-wrap gap-[10rpx]">-->
        <!--            <view class="sub-title py-[6rpx] px-[10rpx]"> # {{ '我有产品' }}</view>-->
        <!--            <view class="sub-title py-[6rpx] px-[10rpx]"> # {{ '我有产品' }}</view>-->
        <!--        </view>-->

        <!--    内容-->
        <view class="content">
            {{ item.content }}
        </view>

        <view class="image-box grid-3 gap-[10rpx]">
            <image
                v-for="(pic, index) in item.pics"
                mode="aspectFill"
                :src="pic"
                :key="index"
                @click.stop="showImg(item, index)"
            ></image>
        </view>

        <furumFooter @share="shareFn" @show-comment="showComment" :item="item"></furumFooter>
    </view>
</template>
<script setup lang="ts">
import furumFooter from './forumFooter.vue'
import topicList from '@/components/topicList/topicList.vue'
import { getImgUrl } from '@/utils/util'
const props = defineProps(['item'])
const emit = defineEmits(['showImg', 'showShare', 'commentPost'])
// 图片预览
const showImg = (item: any, index: number) => {
    uni.previewImage({
        current: index,
        urls: item.pics.map((el: string) => getImgUrl(el)),
        showmenu: true
    })
    // const arr = item.pics.map((el: string) => {
    //   return {
    //     src: el,
    //     descr: item.content,
    //   };
    // });
    // emit("showImg", index, arr);
}

const toDetail = (item) => {
    uni.navigateTo({
        url: '/views/subViews/post/postDetail/index?id=' + item.id
    })
}

const showComment = (item) => {
    console.log('显示评论')
    emit('commentPost', item)
    // uni.$emit('commentPost', item)
}

const shareFn = (item) => {
    emit('showShare', item)
}
</script>

<style scoped lang="scss">
.forumItem {
    padding-bottom: 40rpx;

    .avatar-info {
        image {
            width: 80rpx;
            height: 80rpx;
            border-radius: 9999rpx;
        }

        .info {
            .name {
                color: $t1;
                font-weight: 700;
                font-size: 14px;
            }

            .time {
                color: $t3;
            }
        }
    }

    .sub-box {
        .sub-title {
            color: $t2;
            background-color: #f5f5f5;
            border-radius: 9999rpx;
            font-weight: 700;
        }
    }

    .content {
        color: $t2;
    }

    .image-box {
        width: 100%;
        padding: 16rpx 0;

        image {
            width: 100%;
            aspect-ratio: 1 / 1;
            height: 100%;
            border-radius: 10rpx;
            margin: 0;
            padding: 0;
            line-height: 0;
        }
    }
}
</style>
